قدمت لنا تقنية لغة CSS3 سى إس إس الإصدار الثالث مزايا وحلولا كثيره وجميلة الشكل ولازالت تقدم لنا الكثير والكثير.لقد كان المصممون يستخدمون الصور لعمل أشكالا متنوعه ومختلفه فى تصميماتهم للمواقع والمدونات , وكان هذا يعتبر عبئا على وقت تحميل المدونه أو الموقع ويؤثر ايضا على وضع المدونه أو الموقع فى محركات البحث , ولكن مع سى اس اس الإصدار الثالث يمكنك عمل اشكال كثيره وختلفه وبدون الحاجه لوضع صورا , فقط بعض الأكواد البسيطه لتصنع اشكالا جميله .
مربع
تستطيع عمل مربع ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#square {
width: 100px;
height: 100px;
background: red;
}
مستطيل
تستطيع عمل مستطيل ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#rectangle {
width: 200px;
height: 100px;
background: red;
}
دائره
تستطيع عمل دائره ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
شكل بيضوى
تستطيع عمل شكل بيضوى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
مثلث لأعلى
تستطيع عمل مثلث رأسه لأعلى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
مثلث لأسفل
تستطيع عمل مثلث رأسه لأسفل ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
مثلث لليسار
تستطيع عمل مثلث رأسه لليسار ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
مثلث لليمين
تستطيع عمل مثلث رأسه لليمين ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
مثلث أعلى اليسار
تستطيع عمل مثلث لأعلى اليسار ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
مثلث أعلى اليمين
تستطيع عمل مثلث لأعلى اليمين ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
مثلث أسفل اليسار
تستطيع عمل مثلث لأسفل اليسار ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
مثلث اسفل اليمين
تستطيع عمل مثلث لأسفل اليمين ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
سهم تذييل منحنى
تستطيع عمل سهم تذييل منحنى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
شبه منحرف
تستطيع عمل شبه منحرف ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
متوازى أضلاع
تستطيع عمل متوازى أضلاع ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
نجمه سداسيه
تستطيع عمل نجمه سداسيه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
نجمه خماسيه
تستطيع عمل نجمه خماسيه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red; top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
شكل البنتاجون
تستطيع عمل شكل البنتاجون ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
شكل مسدس
تستطيع عمل شكل مسدس ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
شكل مثمن
تستطيع عمل شكل مثمن ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
قلب
تستطيع عمل شكل قلب ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
شكل علامة اللا نهايه
تستطيع عمل شكل علامة اللا نهايه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
مربع ماسى
تستطيع عمل شكل مربع ماسى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
الدرع الماسى
تستطيع عمل شكل الدرع الماسى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
المتوازى الماسى
تستطيع عمل شكل المتوازى الماسى ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
الماس المقطوع
تستطيع عمل شكل الماس المقطوع ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
البيضه
تستطيع عمل شكل البيضه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
البوكيمون - اكال الجبنه
تستطيع عمل شكل البوكيمون - اكال الجبنه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
فقاعة التحدث
تستطيع عمل شكل فقاعة التحدث ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
انفجار 12 نقطه
تستطيع عمل شكل انفجار 12 نقطه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
انفجار 8 نقطه
تستطيع عمل شكل انفجار 8 نقطه ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
يين يانج
تستطيع عمل شكل يين يانج ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
شارة الشريط
تستطيع عمل شكل شارة الشريط ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#badge-ribbon:before, #badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
غزاة الفضاء - سبيس إنفادرز
تستطيع عمل شكل غزاة الفضاء - سبيس إنفادرز ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#space-invader{
box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}
شاشة التلفاز
تستطيع عمل شكل شاشة التلفاز ب CSS3 سى إس إس الإصدار الثالث عن طريق الكود الاتى
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
فعلا إن العصر القادم للمصممين هو عصر لغة السى إس إس الإصدار الثالث وما يليه من إصدارات تغنينا عن الصور كبيرة الحجم
الى اللقاء .....ابو هشام الحمداني
